<!-- 清单表单组件 -->
<template>
  <view class="list-form-container">
    <u-form :model="formData" ref="uForm" errorType="message" :rules="rules">
      <u-form-item label="清单名称" prop="title" borderBottom>
        <u-input v-model="formData.title" placeholder="请输入清单名称" />
      </u-form-item>
      
      <!-- 图标选择器 -->
      <u-form-item label="清单图标" prop="icon" borderBottom>
        <view class="icon-selector">
          <view 
            v-for="icon in iconList" 
            :key="icon"
            class="icon-item" 
            :class="{'icon-item-active': formData.icon === icon}"
            :style="{'background-color': getIconColor(icon)}"
            @click="selectIcon(icon)"
          >
            <u-icon :name="icon" size="24" :color="formData.icon === icon ? '#ffffff' : '#ffffff'"></u-icon>
          </view>
        </view>
      </u-form-item>
    </u-form>
    
    <view class="form-actions">
      <u-button type="primary" @click="submitForm">{{ isEdit ? '保存修改' : '创建清单' }}</u-button>
      <u-button type="default" @click="cancel" class="cancel-btn">取消</u-button>
    </view>
  </view>
</template>

<script>
import { IconSystem } from '@/utils/constants.js';

export default {
  name: 'ListForm',
  props: {
    // 编辑模式下传入的清单数据
    listData: {
      type: Object,
      default: () => ({})
    },
    // 是否为编辑模式
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        title: '',
        icon: 'file-text'
      },
      // 使用IconSystem中的图标列表
      iconList: IconSystem.iconList,
      rules: {
        title: [
          { required: true, message: '请输入清单名称', trigger: 'blur' },
          { min: 1, max: 20, message: '清单名称长度在1-20个字符之间', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    // 如果是编辑模式，初始化表单数据
    if (this.isEdit && this.listData) {
      this.formData.title = this.listData.title || '';
      this.formData.icon = this.listData.icon || 'file-text';
    }
  },
  methods: {
    // 选择图标
    selectIcon(icon) {
      this.formData.icon = icon;
    },
    
    // 获取图标颜色
    getIconColor(icon) {
      return IconSystem.getIconColor(icon);
    },
    
    // 提交表单
    submitForm() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          const listData = {
            title: this.formData.title,
            icon: this.formData.icon
          };
          
          // 如果是编辑模式，添加ID
          if (this.isEdit && this.listData && this.listData.id) {
            listData.id = this.listData.id;
          }
          
          this.$emit('submit', listData);
        }
      });
    },
    
    // 取消操作
    cancel() {
      this.$emit('cancel');
    }
  }
}
</script>

<style lang="scss" scoped>
.list-form-container {
  padding: 20px;
}

.icon-selector {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.icon-item {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
  }
}

.icon-item-active {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.form-actions {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

.cancel-btn {
  margin-top: 15px;
}
</style> 